<template>
  <view>
    <nav-bar title="详情"></nav-bar>
    <view class="title-box" @resize="handleResize">
      <view class="title">{{ newsDetail.title }}</view>
      <view class="time">{{ newsDetail.createTime }}</view>
      <view class="line"></view>
    </view>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="content-box">
        <rich-text :nodes="newsDetail.content"></rich-text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import api_user from '@/api/user'
  export default {
    name: 'NewsInfoDetail',
    data() {
      return {
        scrollHeight: '',
        newsId: '',
        newsDetail: {}
      }
    },
    onLoad(options) {
      this.newsId = options.id
      this.getNewsDetail()
    },
    onReady() {
      this.getElementHeight()
    },
    methods: {
      getElementHeight() {
        this.$nextTick(() => {
          // 创建查询对象
          setTimeout(() => {
            const query = uni.createSelectorQuery().in(this)
            
            // 选择我们想要的元素
            query.select('.title-box').boundingClientRect(data => {
              // data是一个包含元素尺寸信息的对象
              if (data) {
                // 获取元素高度
                const height = data.height
                this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - height + 'px'
              }
            }).exec()
          }, 200)
        })
      },
      getNewsDetail() {
        const params = {
          id: this.newsId
        }
        api_user.fetchNewsDetail(params).then(res => {
          if (res.code !== 200) return
          const result = res.data
          const imgContent = result.content && result.content.includes('<img') ? result.content.replace(/\<img/g, '<img style="width: 100%;height: auto"') : result.content
          this.newsDetail = {
            ...result,
            content: imgContent && imgContent.replace(/\n/g, '<br/>')
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title-box {
    padding: 30rpx 30rpx 0;
    .title {
      font-size: 42rpx;
      font-weight: 500;
      color: #333;
    }
    .time {
      margin: 30rpx 0;
      font-size: 24rpx;
      color: #999;
    }
    .line {
      width: 630rpx;
      height: 2rpx;
      background-color: #EEE;
    }
  }
  .content-box {
    padding: 30rpx;
    line-height: 48rpx;
    font-size: 28rpx;
    color: #666;
  }
</style>
